<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { Switch } from 'ant-design-vue';
// import { turn } from 'core-js/core/array';
import {
  modifyallmachinestatus // 修改
  // queryallmachine // 查询--url代替
} from '@/service/api/modules/drilling-machine-configuration/operation';
const commonSearchRef = ref(null);
const tableRef = ref(null);

const searchParams = ref({
  machineNo: null,
  machineState: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'machineNo',
    label: '机台号',
    placeholder: '请输入机台号',
    span: 24,
    md: 12,
    lg: 5,
    xl: 5,
    xxl: 4
  },
  {
    type: 'select',
    key: 'machineState',
    label: '状态',
    placeholder: '请选择状态',
    span: 24,
    clear: false,
    md: 12,
    lg: 5,
    xl: 5,
    xxl: 4,
    clear: true,
    selectOptions: [
      {
        label: '启用',
        value: 'true'
      },
      {
        label: '禁用',
        value: 'false'
      }
    ],
    change() {
      search();
    }
  }
];

const column = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machineNo',
    dataIndex: 'machineNo',
    title: '机台号',
    align: 'center',
    width: 300,
    checked: true,
    ellipsis: true
  },
  {
    key: 'machineIp',
    dataIndex: 'machineIp',
    title: '机台ip',
    width: 350,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machinePositionWait',
    dataIndex: 'machinePositionWait',
    title: '待钻位坐标',
    width: 350,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machinePositionReady',
    dataIndex: 'machinePositionReady',
    title: '已钻位坐标',
    width: 350,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'machineState',
    dataIndex: 'machineState',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record, index }) => {
      record.rowStatusChecked = record.machineState == 1;
      return (
        <Switch
          checked={record.rowStatusChecked}
          onChange={e => {
            window.$modal?.confirm({
              title: `确认要${e ? '启用' : '停用'}"机台号${record.machineNo}"吗？`,
              onOk: () => {
                const machineState = e ? 'true' : 'false';
                modifyallmachinestatus(record.machineId, machineState).then(({ data, error }) => {
                  if (!error) {
                    window.$message?.success('操作成功');
                    search();
                  }
                });
              },
              onCancel: () => {}
            });
          }}
        ></Switch>
      );
    }
  }
]);

// 搜索
function search() {
  tableRef.value.getData();
}
// 重置
function reset() {
  nextTick(() => {
    searchParams.value = {
      machineNo: null
    };
    search();
  });
}
</script>

<template>
  <div class="device-setup-page jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      :column="column"
      :show-row-selection="false"
      auto-generate-uuid
      :scroll="{ x: 'auto', y: 'auto' }"
      is-init-get-data
      :row-height="50"
      url="/mes/jlagv/machine/woker/findAll"
    ></Table>
  </div>
</template>

<style lang="scss" scoped></style>
